
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .imgBox{
        width: 1000px;
        margin: auto;
        text-align: center;
    }
    .small,.large{
        font-size: 0;
        outline: 1px solid burlywood;
        margin: auto;
    }
    .small{
        margin: 20px auto;
    }
    .large{
        /*display: none;*/
    }
    .small,.small img,.large{
        width: 300px;
        height: 200px;
        overflow: hidden;
    }
    .large img{
        width: 900px;
        height: 600px;
    }
    .small,.large{
        position: relative;
    }
    .mark{
        opacity: 0.5;
        background-color: #DEB887;
        z-index: 55;
        width: 100px;
        height: 66.666666666px;
        display: none;
    }
    .mark,.large img{
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
</head>
<body>
<div class="imgBox">
    <div class="small">
        <img src="images/product/3.jpg"/>
        <div class="mark"></div>
    </div>
    <div class="large">
        <img src="images/product/3.jpg"/>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        var $small = $(".small"),
            $mark = $(".mark"),
            $large = $(".large");
        $small.on("mousemove",function(e){
// 在鼠标移到小图片中显示出mark ///////\\\\\\\\
            $mark.css("display","block");
//    $large.css("display","block");
// 获取mark的一半宽度高度
            var hw = $mark.width()/2,
                hh = $mark.height()/2;
// 获取鼠标在当前图片中的位置
            var lf = e.pageX-$small.offset().left-hw,
                tt = e.pageY-$small.offset().top-hh;
// 获取mark的想x,y轴偏移率
            var ix = lf/$small.width(),
                iy = tt/$small.height();
// 获取边缘线
            var lb = 1-hw/$small.width()*2,
                tb = 1-hh/$small.height()*2;
// 计算和边缘的关系
            var ix = ix<lb?ix>0?ix:0:lb,
                iy = iy<tb?iy>0?iy:0:tb;
// 进行大图和小图百分比计算
            $mark.css("left",ix*100+"%").css("top",iy*100+"%");
            $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%");
        }).on("mouseout",function(){
// 鼠标移出后mark隐藏
            $mark.css("display","none");
//    $large.css("display","none");
        })
    })
</script>
</body>
</html>
